<template>
	<view>
		<view :style="{'height':allHeight}"></view>
		<view class="custom-tabbar" :style="{ bottom: safeAreaBottom + 'px' }">
			<view v-for="(item, index) in tabList" :key="index" class="tab-item"
				:class="{ 'active': currentIndex === index }" @click="changeTab(index)">
				<uni-icons :type="item.icon" :size="30"
					:color="currentIndex === index ? item.activeColor : item.color"></uni-icons>
				<text :style="{ color: currentIndex === index ? item.activeColor : item.color }">{{ item.text }}</text>
			</view>
		</view>
		<view v-if="safeAreaBottom>0" class="custom-tabbar-bottom"
			:style="{'height':safeAreaBottom + 'px','background-color':'#ffffff'}"></view>
	</view>
</template>

<script>
	export default {
		name: 'CustomTabbar',
		props: {
			// tab 列表数据
			tabList: {
				type: Array,
				default: () => []
			},
			// 当前激活的 tab 索引
			currentIndex: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				// 底部安全区域高度
				safeAreaBottom: 0,
				allHeight: '50px'
			};
		},
		mounted() {
			uni.getSystemInfo({
				success: (res) => {
					console.log(res)
					// 获取底部安全区域高度
					// this.safeAreaBottom = res.safeArea.bottom - res.safeArea.top - res.safeArea.height;
					this.safeAreaBottom = res.safeAreaInsets.bottom
					this.allHeight = `${this.safeAreaBottom + 50}px`
					console.log(this.safeAreaBottom)
				}
			});
		},
		methods: {
			// 切换 tab 的方法
			changeTab(index) {
				// if (this.currentIndex !== index) {
				this.$emit('tabChange', index);
				// }
			}
		}
	};
</script>

<style lang="scss" scoped>
	.custom-tabbar {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 50px;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-around;
		border-top: 1px solid #cccccc;
		z-index: 9;

		.tab-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			cursor: pointer;

			text {
				font-size: 12px;
				// margin-top: 2px;
			}
		}

		.active {
			text {
				font-weight: bold;
			}
		}
	}

	.custom-tabbar-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-around;
		z-index: 9;
	}
</style>